<template>
  <li class="menu-item">
    <div 
      class="menu-item-content"
      :class="{ 'has-children': hasChildren, 'active': isActive }"
      @click="handleClick"
    >
      <i :class="`icon-${item.icon}`" class="menu-icon"></i>
      <span class="menu-title">{{ item.title }}</span>
      <i v-if="hasChildren" class="expand-icon" :class="{ 'expanded': expanded }">▼</i>
    </div>
    
    <ul v-if="hasChildren && expanded" class="submenu">
      <sidebar-menu-item
        v-for="child in item.children"
        :key="child.id"
        :item="child"
        @menu-click="$emit('menu-click', $event)"
      />
    </ul>
  </li>
</template>

<script>
export default {
  name: 'SidebarMenuItem',
  props: {
    item: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      expanded: false
    }
  },
  computed: {
    hasChildren() {
      return this.item.children && this.item.children.length > 0
    },
    isActive() {
      return this.$route.path === this.item.path
    }
  },
  methods: {
    handleClick() {
      if (this.hasChildren) {
        this.expanded = !this.expanded
      } else {
        this.$emit('menu-click', this.item)
      }
    }
  }
}
</script>

<style scoped>
.menu-item-content {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.menu-item-content:hover {
  background-color: #f5f5f5;
}

.menu-item-content.active {
  background-color: #e6f7ff;
  color: #1890ff;
}

.menu-icon {
  margin-right: 8px;
  font-size: 16px;
}

.menu-title {
  flex: 1;
  font-size: 14px;
}

.expand-icon {
  font-size: 12px;
  transition: transform 0.3s;
}

.expand-icon.expanded {
  transform: rotate(180deg);
}

.submenu {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #fafafa;
}

.submenu .menu-item-content {
  padding-left: 40px;
}
</style>